<template>
	<view class="content1">
		<uni-popup type="bottom" ref="payTypePopup" >
			<view class="popup1 flex f-d-c a-i-c">
				<view class="pay-way-box w-100 flex f-d-c">
					<radio-group class="uni-list" @change="radioChange">
						<block v-for="(item,index) in pay_way" :key="index">
							<block v-if="item.type !=='balance'">
								<label class="flex a-i-c w-100 j-c-b" style="margin-bottom: 42rpx;">
									<view class="flex a-i-c color-333 f-s-28">
										<image class="pay-way-icon" :src="item.icon" mode=""></image>
										<label class="label-2-text" :for="item.value">
											<text>{{item.name}}</text>
										</label>
									</view>
									<view>
										<radio :value="item.type" :checked="item.checked"></radio>
									</view>
								</label>
							</block>
							<block v-else>
								<label class="flex a-i-c w-100 j-c-b" style="margin-bottom: 42rpx;" v-if="is_rechange">
									<view class="flex a-i-c color-333 f-s-28">
										<image class="pay-way-icon" :src="item.icon" mode=""></image>
										<label class="label-2-text" :for="item.value">
											<text>{{item.name}}</text>
										</label>
									</view>
									<view>
										<radio :value="item.type" :checked="item.checked"></radio>
									</view>
								</label>
							</block>
						</block>
					</radio-group>
				</view>
				<view class="bottom-btn-box flex a-i-c f-s-30" v-if="popupType === 'order'">
					<view class="item all-center btn1" @click="close(false)">
						取消
					</view>
					<view class="item all-center btn2" @click="close(true)">
						确定
					</view>
				</view>
				<view class="w-100 flex a-i-c j-c-b live-pay" v-if="popupType === 'live'">
					<view class="left">
						<text class="f-s-26 color-999" style="margin-right: 20rpx;">保证金</text><text class="f-s-40 f-w-b" style="color: #FF3158;"><text class="f-s-30 f-w-4">¥</text>200</text>
					</view>
					<view class="live-pay-btn f-s-30 color-fff all-center" @click="close(true)">
						立即支付
					</view>
				</view>
			</view>
		</uni-popup>
		<pay-password ref="showpay" @enter="successPayPassword"></pay-password>
	</view>
</template>

<script>
	import payPassword from "@/components/myComponents/paypassword.vue"
	import {goTo} from "@/nav.js"
	export default {
		components:{
			"pay-password":payPassword
		},
		props:{
			popupType:{
				type:String,
				default:"order"
			},
			item:{
				type:Object,
				default(){
					return {}
				}
			},
			is_rechange:{
				type:Boolean,
				default(){
					return true
				}
			}
		},
		data() {
			return {
				pay_way: [
					{
						name:"微信支付",
						icon:"/static/images/pay-way/weixin-icon.svg",
						value:'1',
						checked:false,
						type:"wechat",
						valuea:0
					},
					{
						name:"支付宝支付",
						icon:"/static/images/pay-way/alipay-icon.svg",
						value:'2',
						checked:false,
						type:"alipay",
						valuea:0
					},
					{
						name:"余额支付",
						icon:"/static/images/pay-way/yue.svg",
						value:'3',
						checked:false,
						type:"balance",
						valuea:0
					}
				],
				pay_type:"",
				pay_pass:""
			};
		},
		mounted() {
			
		},
		methods:{
			goTo,
			successPayPassword(e){
				this.pay_pass = e
				this.close(true,true)
			},
			show(){
				this.$store.state.pay_type_list.map(val=>{
					this.pay_way.forEach(value=>{
						if(val.type === value.type){
							value.valuea = val.value||0
							value.type = val.type,
							value.name = val.name
							value.checked = false
						}
					})
				})
				this.$refs.payTypePopup.open()
			},
			close(isEnter,paypassword = false){
				let that = this
				if(that.pay_type === "balance" && !paypassword &&isEnter){
					if(that.$store.state.userInfo.pay_pass){
						that.$refs.showpay.show()
					}else{
						uni.showModal({
							title:"温馨提示",
							content:"您未设置支付密码",
							confirmText:"去设置",
							success(res){
								if(res.confirm){
									that.goTo({url:"/pages/my/changePayPassword"})
								}
							}
						})
					}
					return
				}
				if(isEnter){
					if(!that.is_rechange){
						that.createRechange()
					}else{
						that.postPay()
					}
				}else{
					that.$refs.payTypePopup.close()
				}
			},
			createRechange(){
				let that = this
				that.util.postRequest({
					url:"v1/order/create",
					data:{
						method:"POST",
						type:3,
						amount:that.item.amount
					}
				}).then(res=>{
					console.log(res)
					that.item.id = res.data[0].id
					that.postPay()
				})
			},
			postPay(){
				let that = this
				that.$createPay({
					pay_type:that.pay_type,
					pay_pass:that.pay_pass,
					order_ids:[that.item.id],
					method:"POST"
				},(res)=>{
					console.log(res)
					that.$refs.payTypePopup.close()
					uni.showToast({
						title:"支付成功"
					})
					that.$emit("refresh",true)
				})
			},
			radioChange(e){
				console.log(e)
				this.pay_type = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.live-pay{
		padding: 0 40upx;
		.live-pay-btn{
			width: 240upx;
			height: 96upx;
			background: linear-gradient(180deg, #0E98E8 0%, #2466F2 100%);
			border-radius: 128upx;
			box-shadow: 0 20upx 40upx -20upx #2567F3;
		}
	}
	.pay-way-box {
		width: 100%;
		padding: 32upx 20upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin-top: 20upx;
		.pay-way-icon{
			width: 48upx;
			height: 48upx;
			margin-right: 22upx;
		}
	}
	.bottom-btn-box{
		.item{
			width: 272upx;
			height: 96upx;
			border-radius: 128upx;
		}
		.btn1{
			border: 2upx solid #979797;
			color: #979797;
			margin-right: 10upx;
		}
		.btn2{
			color: #FFFFFF;
			background: #2567F3;
		}
	}
	.popup1{
		width: 750upx;
		height: 594upx;
		background: #ffffff;
		padding-bottom: 68upx;
		position: relative;
		z-index: 999;
		border-radius: 40upx 40upx 0px 0px;
	}
</style>